import React from "react";
import { Card, Row, Col, Button, notification, message } from "antd";
import "./index.less";

type NotificationPlacement = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";

interface IProp {}

interface IState {}

class UINotice extends React.Component<IProp, IState> {
	constructor(props: IProp, state: IState) {
		super(props, state);
		this.state = {};
	}

	handleNotify = (type: string): void => {
		let config = {
			message: type,
			description: type,
			onClick: () => {
				console.log("click event");
			},
			onClose: () => {
				console.log("close event");
			}
		};
		switch (type) {
			case "success":
				notification.success(config);
				break;
			case "error":
				notification.error(config);
				break;
			case "info":
				notification.info(config);
				break;
			case "warning":
				notification.warning(config);
				break;
			case "warn":
				notification.warn(config);
				break;
			case "close":
				notification.close("something message");
				break;
			case "destroy":
				notification.destroy();
				break;
			default:
				break;
		}
	};

	handleNotifyNormal = () => {
		notification.open({
			message: "normal",
			description: "normal",
			key: "normal",
			placement: "bottomRight",
			bottom: 50,
			duration: 3
		});
	};

	handleNotifyClose = (key: string) => {
		notification.close(key);
	};

	handlePlacement = (placement: NotificationPlacement) => {
		message.info(`Set notification placement ${placement}`);
		notification.config({
			placement: placement
		});
	};

	render() {
		return (
			<div>
				<div style={{ textAlign: "center", color: "red" }}>
					<h1>UI Notice</h1>
				</div>
				<Card title="基本消息通知" className="button-wrap">
					<Row>
						<Col span={12}>
							<Button onClick={() => this.handleNotify("success")}>success</Button>
							<Button onClick={() => this.handleNotify("error")}>error</Button>
							<Button onClick={() => this.handleNotify("info")}>info</Button>
							<Button onClick={() => this.handleNotify("warning")}>warning</Button>
							<Button onClick={() => this.handleNotify("warn")}>warn</Button>
							<Button onClick={() => this.handleNotify("destroy")}>destroy</Button>
						</Col>
						<Col span={12}>
							<Button
								onClick={() => {
									this.handleNotifyNormal();
								}}
							>
								default
							</Button>
							<Button
								onClick={() => {
									this.handleNotifyClose("normal");
								}}
							>
								close
							</Button>
						</Col>
					</Row>
				</Card>

				<Card title="方向控制" className="button-wrap">
					<Row>
						<Col span={12}>
							<Button onClick={() => this.handlePlacement("topLeft")}>Top Left</Button>
							<Button onClick={() => this.handlePlacement("topRight")}>Top Right</Button>
							<Button onClick={() => this.handlePlacement("bottomLeft")}>Bottom Left</Button>
							<Button onClick={() => this.handlePlacement("bottomRight")}>Bottom Right</Button>
						</Col>
					</Row>
				</Card>
			</div>
		);
	}
}

export default UINotice;
